<template>
  <div class="login-container">
    <v-container class="fill-height" fluid>
      <v-row align="center" justify="center">
        <v-col cols="12" sm="8" md="6" lg="4">
          <v-card class="elevation-12">
            <v-card-title class="headline text-center primary white--text py-4">
              {{ $t('login.title') }}
              <!-- 语言切换按钮 -->
              <v-menu offset-y left>
                <template v-slot:activator="{ on, attrs }">
                  <v-btn
                    icon
                    v-bind="attrs"
                    v-on="on"
                    class="language-selector"
                  >
                    <v-icon>mdi-translate</v-icon>
                  </v-btn>
                </template>
                <v-list>
                  <v-list-item
                    v-for="locale in availableLocales"
                    :key="locale.code"
                    @click="switchLanguage(locale.code)"
                  >
                    <v-list-item-title>{{ locale.name }}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>
            </v-card-title>
            
            <v-card-text class="pt-4">
              <!-- 谷歌登录按钮 -->
              <v-btn
                block
                color="#4285F4"
                dark
                class="mb-4"
                @click="googleLogin"
              >
                <v-icon left>mdi-google</v-icon>
                {{ $t('login.google') }}
              </v-btn>
              
              <v-divider class="my-4">
                <span class="px-2">{{ $t('login.or') }}</span>
              </v-divider>
              
              <!-- 邮箱密码登录表单 -->
              <v-form ref="form" v-model="valid" @submit.prevent="login">
                <v-text-field
                  v-model="email"
                  :label="$t('login.email')"
                  prepend-icon="mdi-email"
                  type="email"
                  :rules="emailRules"
                  required
                ></v-text-field>
                
                <v-text-field
                  v-model="password"
                  :label="$t('login.password')"
                  prepend-icon="mdi-lock"
                  :type="showPassword ? 'text' : 'password'"
                  :rules="passwordRules"
                  required
                  :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                  @click:append="showPassword = !showPassword"
                ></v-text-field>
                
                <v-checkbox
                  v-model="rememberMe"
                  :label="$t('login.remember')"
                  color="primary"
                ></v-checkbox>
                
                <v-btn
                  block
                  color="primary"
                  class="mt-4"
                  type="submit"
                  :disabled="!valid"
                  :loading="loading"
                >
                  {{ $t('login.submit') }}
                </v-btn>
              </v-form>
              
              <!-- 错误信息显示 -->
              <v-alert
                v-if="error"
                type="error"
                class="mt-4"
                dense
              >
                {{ error }}
              </v-alert>
              
              <div class="text-center mt-4">
                <a href="#" @click.prevent="forgotPassword">{{ $t('login.forgot') }}</a>
              </div>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
export default {
  name: 'LoginPage',
  // 不需要认证即可访问
  auth: 'guest',
  
  head() {
    return {
      title: this.$t('login.title')
    }
  },
  
  data() {
    return {
      valid: false,
      loading: false,
      email: '',
      password: '',
      showPassword: false,
      rememberMe: true,
      error: null,
      emailRules: [
        v => !!v || this.$t('validation.required'),
        v => /.+@.+\..+/.test(v) || this.$t('validation.email')
      ],
      passwordRules: [
        v => !!v || this.$t('validation.required'),
        v => v.length >= 6 || this.$t('validation.passwordLength')
      ]
    }
  },
  
  computed: {
    availableLocales() {
      return this.$i18n.locales
    }
  },
  
  methods: {
    // 邮箱密码登录
    async login() {
      if (!this.$refs.form.validate()) return
      
      this.loading = true
      this.error = null
      
      try {
        // 调用auth模块的登录方法
        await this.$auth.loginWith('local', {
          data: {
            email: this.email,
            password: this.password,
            rememberMe: this.rememberMe
          }
        })
        
        // 登录成功后跳转到个人主页
        this.$router.push(this.localePath('/dashboard'))
      } catch (err) {
        this.error = err.response?.data?.message || this.$t('login.error')
      } finally {
        this.loading = false
      }
    },
    
    // 谷歌登录
    googleLogin() {
      this.loading = true
      this.error = null
      
      try {
        this.$auth.loginWith('google')
      } catch (err) {
        this.error = this.$t('login.googleError')
        this.loading = false
      }
    },
    
    // 忘记密码
    forgotPassword() {
      // 实现忘记密码功能
      this.$router.push(this.localePath('/forgot-password'))
    },
    
    // 切换语言
    switchLanguage(locale) {
      this.$i18n.setLocale(locale)
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.language-selector {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>